<template>
    <div class="home">
        <!-- 头部 -->
        <van-nav-bar title="瓜夕夕" fixed>
            <template #left>
                <img src="../assets/logo.png" alt="" style="width:75px">
            </template>
            <!-- 搜索框 -->
            <template #right>
                <van-icon name="search" size="25" color="#ffffff" @click="search"/>
            </template>
        </van-nav-bar>

        <!-- 轮播图块 -->
        <van-swipe class="swipe" :style="{height:h}" :autoplay="3000" indicator-color="white" style="margin-top:47px" >
            <van-swipe-item v-for="(item,i) in lunbosrc" :key="i">
                <img :src="item.c_image" alt="">
            </van-swipe-item>
        </van-swipe>
        <!-- 商品导航 -->
        <van-tabs v-model="choose" 
                title-active-color="#d4237a" 
                style="margin-bottom:20px;"
                title-inactive-color="black">
            <van-pull-refresh v-model="isLoading" :head-height="20" @refresh="onRefresh">
                <van-list
                    v-model="loading"
                    :finished="finished"
                    :offset="30"
                    :immediate-check="false"
                    finished-text="已全部加载完成"
                    @load="loadMore"
                    >
                    <van-tab :title="item.sname" v-for="(item,i) in title" :key="i"  class="SP">
                        <!-- 商品图片区 -->
                        <router-link to="details">
                            <van-card
                                class="float-item"
                                v-for="(item,i) in shangpings"
                                :key="i"
                                style="width:47%;margin:5px;float:left;"
                                :price="(item.aprice-2).toFixed(2)"
                                desc="新鲜水果"
                                :title="item.aname"
                                :origin-price="item.aprice"
                                :thumb="item.a_image">
                            </van-card>
                        </router-link>
                    </van-tab>
                </van-list>
            </van-pull-refresh>
        </van-tabs>
        <!-- 底部导航 -->
        <van-tabbar v-model="active" border fixed router>
            <van-tabbar-item name="home" to="/" icon="home-o">首页</van-tabbar-item>
            <van-tabbar-item to="live" icon="video-o" dot>直播</van-tabbar-item>
            <van-tabbar-item to="news" icon='chat-o' badge="5">消息</van-tabbar-item>
            <van-tabbar-item to="shopping" icon="shopping-cart-o">购物车</van-tabbar-item>
            <van-tabbar-item to="me" icon="manager-o">我的</van-tabbar-item>
        </van-tabbar>
    </div>
</template>

<script>
export default {
    data(){
        return{
            active:'home',
            choose:'0',
            h:'',
            value:'',
            title:'',
            shangpings:[],
            cid:'',
            page:1,
            pagecount:'',
            lunbosrc:'',
            isLoading: false,
            finished: false,
            loading: false,
        }
    },
    methods:{
        initSwipeHeight(){
        let picWidth=540;
        let picHeight=304;
        let screenWidth=window.screen.width;
        let swipeheight=Math.floor((picHeight*screenWidth)/picWidth)+"px";
        this.h=swipeheight
        },
        search(){
            this.$router.push('/search')
        },
        loadSort(){
            this.axios.get('/sort').then(result=>{
                // console.log(result)
                this.title=result.data.result
            })
        },
        loadLunbosrc(){
            this.axios.get('/lunbo').then(result=>{
                // console.log(result)
                let lunbosrc=result.data.result
                lunbosrc.forEach(item=>{
                    if(item.c_image){
                item.c_image=require(`../../public/img/${item.c_image}`)
                }
                })
                this.lunbosrc=lunbosrc;
            })
        },
        loadArticles(cid,page,callback){
            this.axios.get(`/article?cid=${cid}&page=${page}`).then(result=>{
                let shangpings=result.data.result;
                let pagecount=result.data.pagecount;
                this.pagecount=pagecount;
                this.shangpings=shangpings;
                shangpings.forEach(item=>{
                    if(item.a_image){
                        item.a_image=require(`../assets/${item.a_image}`)
                }
                // console.log(item.a_image);
                })
                this.page++;
            })
        },
        loadMore(){
            let cid=this.choose;
            // console.log(this.page);
            this.axios.get(`/article?cid=${cid}&page=${this.page}`).then(result=>{
                let shangpings=result.data.result;
                let pagecount=result.data.pagecount;
                this.pagecount=pagecount;
                // console.log(pagecount);
                shangpings.forEach(item=>{
                    if(item.a_image){
                        item.a_image=require(`../assets/${item.a_image}`)
                }
                })
                this.shangpings=[...this.shangpings,...shangpings];
                this.page+=1;
                this.loading=false;
                if(this.page>=pagecount+1){
                    this.finished=true;
                 }
            })
        },
        onRefresh() {
        this.page = 1;
        this.loadArticles(this.choose,1);
        this.isLoading = false;
        this.$toast('刷新成功')
        },
        // onLoadList() {
        // this.page++
        // this.loading = false
        // this.loadArticles()
        // this.$toast('加载成功')
        // },

    },
    watch:{
        choose(newvalue){
          this.page=1;
        this.finished=false;
          window.scrollTo(0,0);
          //newvalue就是切换到的类别id
            this.loadArticles(newvalue,1,(shangpings)=>{
            this.shangpings=shangpings
        })
      },
    },
    mounted(){
        this.initSwipeHeight();
        this.loadSort();
        this.loadLunbosrc();
        // this.loadArticles(1,1,(shangpings)=>{
        //     this.shangpings=shangpings
        // })
    }
}
</script>
<style class>
    .home .van-nav-bar{
    background-color: rgb(86, 206, 132);
    }

    .home .van-nav-bar__title{
        color: aliceblue;
        font-size: 20px;
    }
    .home .van-nav-bar__text{
        color: aliceblue;
    }
    .home .van-list__finished-text{
        position: relative;
        bottom: 25px;
    }
   .home .swipe img{
        width:100%
    }
   .home .SP{
        width: 100%;
        overflow: auto;
        position: relative;
        bottom: 10px;
    }
    .home .SP .van-card{
        background: #faf4f4;
    }
    .home .van-tabs__nav{
        background-color: #fafafa;
    }
    /* .home .van-clearfix{
        width: 100%;
        overflow: auto;
        margin-bottom:50px
    } */
</style>


